<template>
    <div class="main">
        <div class="input2">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="75px" class="demo-ruleForm">
             <el-form-item label="账户名：" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import {login} from '../utils/api/login'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    var checkUserName = (rule, value, callback) => {
        if (value=== '') {
          return callback(new Error('用户名不能为空'));
        }
      };
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('请输入密码'));
        }
      };
    return {
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { validator: checkUserName, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ]
        }
      };
    },
methods:{
    submitForm(){
        login(this.ruleForm).then((data)=>{
            console.log(data);
            if(data.data.code==200){
                sessionStorage.setItem('userName',data.data.user.username);
                this.$router.push('/home')
            }
        })
    },
    // 重置
    resetForm(){
        this.ruleForm.username='',
        this.ruleForm.password=''
    }
}
}
</script>
<style lang="less" scoped>
    .main{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-image: url('../assets/bg.webp');
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .input2{
        width: 500px;
        padding: 100px 60px;
        box-sizing: border-box;
        background-color: rgba(247, 243, 243, 0.634);
    }
    .el-button{
      width: 41%;
    }
</style>